<template>
    <outer-view>
      <div class="search-option-oneline">
        <a-form
          ref="formRef"
          :label-col="{ span: 8 }"
          :wrapper-col="{ span: 16 }"
          class=""
          :model="searchOptions"
        >
          <a-row :gutter="24">
              <a-col :span="6">
                <a-form-item label="类型">
                  <a-select v-model:value="searchOptions.type" style="width: 100%" ref="select" :defaultActiveFirstOption="true">
                    <a-select-option v-for="typeInfo in data.typeList" :key="typeInfo.id" :value="typeInfo.label">{{typeInfo.label}}</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <a-form-item label="标题">
                  <a-input v-model:value="searchOptions.title"></a-input>
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <a-form-item label="内容">
                  <a-input v-model:value="searchOptions.content"></a-input>
                </a-form-item>
              </a-col>
              <a-col :span="6" style="text-align: right;padding-right:20px">
                <a-button type="primary" @click="clickSearch">搜索</a-button>
                <a-button type="primary" @click="addRecord">新增</a-button>
              </a-col>
          </a-row>
        </a-form>
      </div>
      <div class='outer-div'>
        <a-table :columns="columns" @expand="expandEvent" :customRow="customRow" :expandedRowKeys="expandedRowKeys" :data-source="data.dataList" :pagination=false rowKey="id"  :scroll=tableHeight  :row-class-name="(_record:any, index:any) => (index % 2 === 1 ? 'table-striped' : null)">
          <template #bodyCell="{ record,column }">
            <template v-if="column.title === '操作'">
                <a-tag color="red" @click="deleteTask(record)">删除</a-tag>
            </template>
            <template v-if="column.title === '创建时间'">
              <span>{{dateFormater(new Date(Number(record.createTime)),'yyyy-MM-dd')}}</span>
            </template>
            <template v-if="column.title === '计划开始时间'">
              <span>{{record.startTime ?  dateFormater(new Date(Number(record.startTime)),'yyyy-MM-dd') : ''}}</span>
            </template>
            <template v-if="column.title === '计划完成时间'">
              <span>{{record.endTime ? dateFormater(new Date(Number(record.endTime)),'yyyy-MM-dd') : ''}}</span>
            </template>
            <template v-if="column.title === '内容'">
              <span>{{formateContent(record.content)}}</span>
            </template>
          </template>
          <template #expandedRowRender="{ record, index, indent, expanded }">
            <task-content :record="record" @saveTask="saveTask(record)"></task-content>
          </template>
        </a-table>
      </div>
    </outer-view>
</template>
<script setup lang="ts">
import { onMounted, reactive,ref,UnwrapRef,createVNode } from 'vue';
import outerView from '../components/outerView.vue';
import service from '../../axios';
import {getHeight,dateFormater} from '../../util/util'
import taskContent from './task-content.vue';
import { Modal } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
    const searchOptions = reactive({
        type:'工作',
        title:'',
        content:'',
    })

    const data = reactive({
        dataList:[],
        typeList:[] as Array<any>
    })

    service.post('/coc/getDict',{type:'fl'}).then(res=>{
      data.typeList = res.data;
    })

    const customRow = function(task:any,index:any){
      debugger
      let className = '';
      let now = new Date().getTime();
      
      if(task.startTime && now>task.startTime && task.status == '未开始'){
        className = 'outStartTime'
      }
      if(task.endTime && now>task.endTime){
        className = 'outEndTime'
      }
      if(now>task.startTime &&  now<task.endTime && task.status == '进行中'){
        className = 'progress'
      }
      if(task.status == '已完成'){
        className = 'completed'
      }
      
      return {class:className}
    }

    let tableHeight = ref({
      y:200
    })

    const columns = [{title: '标题',dataIndex: 'title',},
      {title: '内容',dataIndex: 'content',ellipsis:true},
      {title: '备注',dataIndex: 'mark',},
      {title: '类型',dataIndex: 'type',},
      {title: '创建时间',dataIndex: 'createTime',},
      {title: '计划开始时间',dataIndex: 'startTime',},
      {title: '计划完成时间',dataIndex: 'endTime',},
      {title: '用户',dataIndex: 'userName',},
      {title: '状态',dataIndex: 'status',},
      {title: '操作',width:'200px'}];

    const editableData: UnwrapRef<Record<string, any>> = reactive({});

    onMounted(()=>{
      clickSearch();
      window.addEventListener('resize', getHeight(tableHeight,(32+32+12+40),"outer-div"))
    })

    const formateTime = function(time:any){
      let date = new Date(Number(time))
      return date.getFullYear() + '-' + date.getMonth() + '-' + date.getDate()+ ' ' + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds();
    }

    const clickSearch = function(){
      service.post('/task/getTasks',searchOptions).then(res=>{
        data.dataList= res.data;
      });
    }

    const addRecord = function(){
      service.post('/task/addTask',{}).then(res=>{
        clickSearch()
      });
    }

    let expandedRowKeys = reactive([] as any)

    const expandEvent = function(expanded:boolean, record:any){
      debugger
      if(expanded){
        expandedRowKeys.push(record.id)
      }else{
        expandedRowKeys.splice(expandedRowKeys.indexOf(record.id),1)
      }
    }
    
    const saveTask = function(task:any){
      expandedRowKeys.splice(expandedRowKeys.indexOf(task.id),1)
      clickSearch()
    } 

    const deleteTask = function(record:any){
      Modal.confirm({
        content: '确认删除？'+record.title,
        icon: createVNode(ExclamationCircleOutlined),
        okText:'确定',
        onOk() {
          service.post('/task/deleteTask',record).then(res=>{
            clickSearch();
          })
        },
        cancelText: '取消',
        onCancel() {
          Modal.destroyAll();
        },
      });
    }

    const formateContent = function(content:string){
      let matchResult = content.match(/(?<=<p>).*?(?=<\/p>)/)
      return matchResult ? matchResult[0] : content
    }

</script>
<style lang="less">
  .outStartTime{
    background-color: #E6A23C;
  }
  .outEndTime{
    background-color: #f56c6c;
  }
  .completed{
    background-color: #2c6b0d;
  }
  .progress{
    background-color: #b5fc91;
  }
</style>